<template>
  <div v-show="show" v-cloak>
    <ul class="brand_ul2 brand_service_ul">
      <li v-for="(item,index) in questionList" @click="servicedetail(item.ar_id)">
        <img :src="item.ar_image" alt="">
        <div>
          <h3 v-html="item.ar_title"></h3>
          <p v-html="item.ar_introduce"></p>
          <p class="case_p" style="display: block;font-size: 14px;">
            <span class="fr">上传人:{{item.ar_author}}</span>
            <span>{{item.time}}</span>
          </p>
        </div>
      </li>
    </ul>
    <div class="pageul">
      <Page :total="count" :page-size="limit"  prev-text="上一页" next-text="下一页" show-total @on-change="changepage"></Page>
    </div>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  export default {
    name: 'anwerlist',
    components: {
    },
    data () {
      return {
        cate: '',
        type: null,
        show: false,
        page: 0,
        limit: 6,
        questionList: [],
        questionAjax: true,
        count: 0,
        ca_id: -1
      }
    },
    methods: {
      servicedetail: function (arid) {
        let routeUrl = this.$router.resolve({
          path: '/Revehicle/ServiceDetail',
          query: {
            ar_id: arid,
            cate: this.cate
          }
        })
        if (this.type) {
          routeUrl = this.$router.resolve({
            path: '/Revehicle/ServiceDetail',
            query: {
              ar_id: arid,
              cate: this.cate,
              type: this.type,
              ca_id: this.ca_id
            }
          })
        }
        window.open(routeUrl.href, '_self')
      },
      changepage (index) {
        this.page = index - 1
        this.questionList = []
        this.questionAjax = true
        this.getArticleList()
      },
      getArticleList: function () {
        let thisObj = this
        if (!thisObj.questionAjax) {
          return false
        }
        thisObj.questionAjax = false
        let url = 'User/getArticleList'
        let data = {
          cate: thisObj.cate,
          page: thisObj.page,
          limit: thisObj.limit
        }
        if (thisObj.type === '资讯') {
          url = 'User/getInformationArticleList'
          data.ca_id = decodeURI(thisObj.$chaos.getQueryString('ca_id'))
        }
        // 获取问答列表
        thisObj.$chaos.ajax({
          data: data,
          slient: true,
          userinfo: false,
          url: url,
          callback: function (type, res) {
            thisObj.questionAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              if (thisObj.page === 0) {
                thisObj.count = parseInt(res.result.count)
              }
              thisObj.questionList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        var crumbs = []
        thisObj.questionAjax = true
        if (decodeURI(thisObj.$chaos.getQueryString('type'))) {
          thisObj.type = decodeURI(thisObj.$chaos.getQueryString('type'))
          thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
          thisObj.ca_id = decodeURI(thisObj.$chaos.getQueryString('ca_id'))
          crumbs[0] = {
            title: thisObj.type,
            link: ''
          }
          crumbs[1] = {
            title: thisObj.cate,
            link: ''
          }
        } else {
          thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
          thisObj.type = null
          crumbs[0] = {
            title: thisObj.cate,
            link: ''
          }
        }
        this.$store.commit('crumbs', crumbs)
        thisObj.getArticleList()
      }
    },
    created: function () {
      this.verify()
    },
    activated () {
      this.verify()
    }
  }
</script>
<style>
  .main-title span{
    font-size: 16px!important;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
  /*分页样式*/
</style>
<style scoped>
  .brand_ul2>li{
    background: none!important;
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul2>li:hover{
    color: #6d6d6d;
  }
  .case_p{
    margin-top:30px;
    color: #6d6d6d;
  }
  .case_p .fr{
    float: right;
  }
  .brand_ul2>li>img{
    width:320px;
    height:270px;
    float: left;
  }
  .brand_ul2>li>div{
    margin-left:350px;
    margin-top: 20px;
  }
  .brand_ul2>li>h3{
    font-size: 20px;
  }
  .brand_ul2>li>div>p{
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: justify;
    font-size: 16px;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .topc>ul>li {
    cursor: pointer;
  }
  .brand_ul2>li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2>li>div>h3 {
    margin-bottom: 20px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .brand_ul2>li>>div>p {
    line-height: 33px;
    font-size: 16px;
  }
</style>
